<template>
	<!--  -->
	<view class="my-recharge" ref="uv-back-top">
		<!-- customStyle="margin-bottom: 10px;width: 100%;overflow: auto;" -->
		<headers></headers>
		<el-container>
			<el-aside class="hidden-sm-and-down" width="500px">
				<my :heads="false"></my>
			</el-aside>
			<el-main style="margin: 0px;padding: 0px;">
				<view class="content">
					<view
						style="margin-top: 5px;display: flex;justify-content: center;border: 1px solid #c1c1c1;border-radius: 5px;padding: 5px 10px;">
						<uv-text text="可提现" color="#70848F"></uv-text>
						<uv-text :text="vuex_user.cash" size="40" color="#01B5E7" align="center"></uv-text>
						<uv-text customStyle="cursor: pointer;" text="提现记录" @click="open" color="#70848F"
							align="right"></uv-text>
					</view>
					<uv-text style="margin-top: 10px;" text="提现方式" color="#70848F"></uv-text>
					<view style="margin: 0px;display: flex;justify-content:space-between;flex-wrap: wrap;"
						justify="between">
						<view :class="payway==item.value?'radiolist_item aty':'radiolist_item'"
							:style="screen?'width: 23%;':'width: 41%;'" v-for="(item,index) in radiolist"
							:key="item.value" @click="clickWay(item)">
							<uv-icon :name="item.icon" size="28"></uv-icon>
							<uv-text size="24" :text="item.name" align="end"></uv-text>
						</view>
					</view>
					<view
						style="display: flex;justify-content: flex-start;flex-direction: column;background-color: rgba(255, 255, 255, 0.5);border-radius: 5px;">
						<view style="font-size: 14px;margin-bottom: 3px;">
							自定义提现金额：<!-- （最小10元） -->
						</view>
						<uv-input style="background-color: #fff;" :disabled="vuex_user.cash==0" @input="inputChange"
							type="number" v-model="amount" placeholder="请输入价额" border="surround">
							<template v-slot:suffix>
								<view style="font-size: 14px;color: #666666;">
									金额
								</view>
							</template>
						</uv-input>
					</view>
					<view
						style="display: flex;justify-content: flex-start;flex-direction: column;background-color: rgba(255, 255, 255, 0.5);border-radius: 5px;">
						<view style="font-size: 14px;margin-bottom: 3px;">
							真实姓名必须与账号保持一致：
						</view>
						<uv-input style="background-color: #fff;" v-model="realname" placeholder="请输入真实姓名"
							border="surround">
						</uv-input>
					</view>
					<view
						style="display: flex;justify-content: flex-start;flex-direction: column;background-color: rgba(255, 255, 255, 0.5);border-radius: 5px;">
						<view style="font-size: 14px;margin-bottom: 3px;">
							账号：
						</view>
						<uv-input style="background-color: #fff;" v-model="account" placeholder="请输入账号"
							border="surround">
						</uv-input>
					</view>
					<uv-button type="primary" shape='circle' customStyle="margin:10px 0px" @click="handlePay">
						<view style="font-size: 15px;display: flex;justify-content: center;align-items: center;">
							立即提现
							<view style="font-size: 20px;margin: 0px 5px;">
								{{amount}}
							</view>
							元
						</view>
					</uv-button>
					<uv-text text="分销提现:　如果要手机号必须要与账号的手机号一致,无手续费" color="#666" size="13"></uv-text>
					<view class=""
						style="margin-bottom: 20px;color:#c1c1c1;font-size: 14px;;display: flex;justify-content: center;align-items: center;">
						支付即视为您同意
						<view @click="routed('/pages/my/protocol')" style="color:#2979FF;">《提现协议》</view>
					</view>
				</view>
			</el-main>
		</el-container>
		<uv-popup ref="popup" mode="center" round="10" custom-style="height: auto;width: 99%;">
			<view style="width: 90%;padding: 5px 10px;">
				<el-table :data="tableData" size="mini">
					<el-table-column label="日期" width="130" :formatter="formatter">
					</el-table-column>
					<el-table-column prop="payway" label="提现方式" width="70">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.payway === 'alipay'" type="primary" size="mini"
								disable-transitions>支付宝</el-tag>
							<el-tag v-if="scope.row.payway === 'wxpay'" type="info" size="mini"
								disable-transitions>失败</el-tag>
							<el-tag v-if="scope.row.payway === 'bankpay'" type="success" size="mini"
								disable-transitions>银行卡</el-tag>
						</template>
					</el-table-column>
					<el-table-column property="account" label="账号"></el-table-column>
					<el-table-column property="realname" label="姓名"></el-table-column>
					<el-table-column property="amount" label="金额"></el-table-column>
					<!-- <el-table-column width="300" property="status" label="状态"></el-table-column> -->
					<el-table-column prop="status" label="状态" width="70">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.status === 'pending'" type="primary" effect="dark" size="mini"
								disable-transitions>申请中</el-tag>
							<el-tag v-if="scope.row.status === 'rejected'" type="info" effect="dark" size="mini"
								disable-transitions>失败</el-tag>
							<el-tag v-if="scope.row.status === 'approved'" type="success" effect="dark" size="mini"
								disable-transitions>成功</el-tag>
						</template>
					</el-table-column>
				</el-table>
				<uni-pagination style="margin-top: 5px;" title="标题文字" v-model="pageCurrent" :pageSize="pageSize"
					show-icon="true" :total="total" :current="pageCurrent" @change="getWithdrawalList"></uni-pagination>
			</view>
		</uv-popup>
		<uv-toast ref="toast"></uv-toast>
		<uv-navbar v-if="!screen" title="分销-提现" @leftClick="navigateBack" :placeholder="true"></uv-navbar>
		<uv-back-top :scroll-top="scrollTop"></uv-back-top>
		<tabbars :prop-value="'my'"></tabbars>
	</view>
</template>

<script>
	// 引入
	import avatar from './tabBar/avatar';
	import my from '@/pages/my/index'
	import headers from '@/components/header/header.vue';
	import tabbars from '@/components/tabbar/tabbar';
	import config from '@/common/config'
	import {
		getUser,
		apply,
		getMember,
		getWithdrawalList,
		paymentQuery
	} from '@/common/api.js';
	export default {
		components: {
			// 注册组件
			tabbars,
			avatar,
			headers,
			my
		},
		data() {
			return {
				tableData: [],
				scrollTop: 0,
				loginUrl: config.loginUrl,
				img: config.img,
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				total: 0,
				value: '',
				date: uni.$uv.date(new Date(), 'yyyy/mm/dd  hh:MM:ss'),
				timeData: {},
				// 基本案列数据
				radiolist: [{
						name: '微信',
						value: 'wxpay',
						icon: '/static/my/wxpay.svg',
						disabled: true
					}, {
						name: '支付宝',
						value: 'alipay',
						icon: '/static/my/alipay.svg',
						disabled: false
					},
					{
						name: '银行卡',
						value: 'bankpay',
						icon: '/static/my/bankpay.svg',
						disabled: false
					}
				],
				// uv-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				payway: 'alipay',
				amount: 0,
				realname: '',
				account: '',
				tagsList: [{
						text: '卡通动漫',
						checked: true
					},
					{
						text: '摄影写实',
						checked: false
					},
					{
						text: '主流国风',
						checked: false
					}, {
						text: '11',
						checked: false
					},
					{
						text: '22',
						checked: false
					},
					{
						text: '33',
						checked: false
					},
					{
						text: '11',
						checked: false
					},
					{
						text: '55',
						checked: false
					}
				],
			}
		},
		computed: {},
		onLoad() {
			// const systemInfo = uni.getSystemInfoSync();
			// uni.$uv.toast('当前环境为 ' + systemInfo.platform);
			// if (systemInfo.platform === 'my') {
			// 	uni.$uv.toast('当前环境为支付宝小程序！')
			// 	// console.log('当前环境为支付宝小程序');
			// 	// 在这里执行支付宝特有的逻辑
			// } else {
			// 	uni.$uv.toast('当前环境不是支付宝小程序！')
			// 	// console.log('当前环境不是支付宝小程序');
			// }
			var that = this;
			this.getMember();
			// if (this.tradeNo) {
			// 	paymentQuery({
			// 		tradeNo: this.tradeNo,
			// 	}, {
			// 		custom: {
			// 			auth: true,
			// 			catch: true,
			// 		}
			// 	}).then(e => {
			// 		getUser({
			// 			custom: {
			// 				auth: true,
			// 				catch: false,
			// 			}
			// 		}).then(e => {
			// 			that.$uv.vuex('vuex_user', e);
			// 		})
			// 	})
			// }
			// uni.$uv.vuex('tradeNo', 'lv0_1733741082659_sEykVGxY6h');
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
		methods: {
			formatter(row, column) {
				return uni.$uv.date(row.createdAt, 'yyyy/mm/dd hh:MM');
			},
			open() {
				this.getWithdrawalList();
				this.$refs.popup.open();
			},
			// 计算金额
			inputChange(e) {
				this.$nextTick(() => {
					let val = e.toString();
					val = val.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
					val = val.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
					val = val.replace(/^0+\./g, '0.');
					val = val.match(/^0+[1-9]+/) ? val = val.replace(/^0+/g, '') : val
					val = (val.match(/^\d*(\.?\d{0,2})/g)[0]) || ''

					if (val.includes(".")) {
						let numDian = val.toString().split(".")[1].length;
						if (numDian === 2) {
							this.amount = val.length;
						}
					} else {
						// this.amountMaxLeng = 8;
					}
					if (val > this.vuex_user.cash) {
						this.amount = this.vuex_user.cash;
					} else {
						this.amount = val;
					}
				});
			},
			clickWay(e) {
				this.payway = e.value;
			},
			getMember() {
				// var that = this;
				// getMember({
				// 	custom: {
				// 		auth: true,
				// 		catch: false,
				// 	}
				// }).then(e => {
				// 	var list = [];
				// 	for (var i = 0; i < this.vipData.length; i++) {
				// 		this.lists.push(this.vipData[i].name);
				// 	}
				// 	this.clickMember(this.vip[0]);
				// }).catch(e => {})
			},
			getWithdrawalList(e) {
				getWithdrawalList({
					// type: this.type,
					pageSize: this.pageSize,
					pageCurrent: this.pageCurrent,
					// key: key,
				}, {
					custom: {
						auth: true,
						catch: true,
					}
				}).then(res => {
					// console.log(res);
					this.tableData = res.data
					this.total = res.total
					this.loading = false

					// this.$message.error(res.msg || '登录失败');
					// this.tableData = []
					// this.total = 0
					// this.loading = false
				})
			},

			handlePay() {
				if (this.payway == 'wxpay') {
					//微信支付
				} else if (this.payway == 'alipay') {
					//支付宝支付
					this.callAliPay()
				}
			},
			getRandomInt(min, max) {
				min = Math.ceil(min); // 保证min是整数
				max = Math.floor(max); // 保证max是整数
				return Math.floor(Math.random() * (max - min + 1)) + min; // 生成介于min和max之间的整数
			},
			// getTradeNoFromUrl(url) {
			// 	const params = new URLSearchParams(url.split('?')[1]);
			// 	console.log(decodeURIComponent(url.split('?')[1]))
			// 	console.log('url', params.get('trade_no'));
			// 	this.$uv.vuex('tradeNo', params.get('trade_no'));
			// },
			callAliPay() {
				// 支付宝支付功能可用
				if (this.amount) {
					apply({
						amount: this.amount,
						realname: this.realname,
						account: this.account,
						payway: this.payway,
						platform: uni.$uv.os(),
						isApp: this.isApp,
					}, {
						custom: {
							auth: true,
							// toast: true,
						},
					}).then(e => {
						this.$refs.toast.show({
							message: '提现申请已提交!',
						})
					}).catch(e => {
						console.log(e);
						// that.routes('chat/index');
					})
				} else {
					return uni.$uv.toast('请填写价格！')
				}

			},
			onChange(e) {
				this.timeData = e
			},
			left() {
				console.log('left');
			},
			right() {
				console.log('right');
			},
			routed(url) {
				uni.$uv.route({
					url: url,
					intercept(params, next) {
						console.log(params, next)
						uni.showLoading({
							title: '等待中...'
						})
						// 模拟处理等待
						setTimeout(() => {
							uni.hideLoading();
							next(true);
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-recharge {
		// width: calc(100% - 20px);
		width: 100%;

		.content {
			max-width: 800px;
			border-radius: 10px;
			border: 1px solid #eee;
			padding: 10px;
			margin-top: 5px;
		}

		.radiolist_item {
			height: auto;
			border: 1px solid #ffaaff;
			margin: 5px 1px;
			padding: 10px;
			border-radius: 10px;
			text-align: center;
			display: flex;
			justify-content: flex-start;
		}

		.aty {
			background: linear-gradient(to right, rgb(167, 168, 216), rgb(213, 213, 213));
		}

		.item {
			width: 90px;
			height: 80px;
			background: linear-gradient(to right, rgb(167, 168, 216), rgb(213, 213, 213));
			margin: 10px 5px 20px;
			border-radius: 10px;
			text-align: center;

			.item_bottom {
				background-color: #ffaaff;
				width: 100%;
				text-align: center;
				height: 30px;
				margin-bottom: -10px;
				border-bottom-left-radius: 10px;
				border-bottom-right-radius: 10px;
			}
		}
	}


	// 测试
	.demo-layout {
		height: 24px;
	}

	.bg-purple {
		background: #CED7E1;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
</style>

</style>